<template>
  <div>
    <el-button
      class="photo-button"
      icon="el-icon-s-fold"
      round
      @click="drawer = true"
      type="primary"
    >相册</el-button>
    <el-drawer title show-close :visible.sync="drawer">
      <div class="img-box" v-for="(item,index) in urls" :key="index">
        <img :src="item.imgUrl" title="左击复制图片地址" class="tag-read" :data-clipboard-text="item.imgUrl" @click="copy()" />
        <el-button v-if="login"  size="mini" :loading="loading" class="mask" type="danger" icon="el-icon-delete" circle @click="del(item)"></el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import Clipboard from 'clipboard'
export default {
  name: 'Drawer',
  props: {urls:{},loading:{default:false}},
  data() {
    return {
      drawer: false,
      user:{},
      login:false
    }
  },
  mounted() {
    this.login = this.$store.state.login
  },
  methods: {
    copy() {
      var clipboard = new Clipboard('.tag-read')
      clipboard.on('success', () => {
        this.$message({
          message: '复制成功',
          type: 'success'
        })
        // 释放内存
        clipboard.destroy()
      })
    },
    del(item) {
      this.$emit('fromChild', item)
    }
  }
}
</script>

<style lang="scss">
.el-drawer {
  background: #d8e3e7;
  padding-bottom: 1rem;
}
.el-drawer__body {
  width: 100%;
  // height: 100%;
  margin: 0 1.25rem;
  // position: static;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
}
.img-box {
  margin-bottom: 0.8rem;
  width: 13rem;
  padding: 0 0.8rem;
  position: relative;
  img {
    border-radius: 4px;
    width: 100%;
  }
  .mask{
    opacity: 0;
  }
  &:hover .mask{
    opacity: 0.8;
  }
}
</style>

<style lang="scss" scoped>
.photo-button {
  position: fixed;
  top: 50%;
  right: -55px;
  margin-top: -40px;
  &:hover {
    right: -20px;
  }
}

</style>